import { PageContainer, ProTable } from '@ant-design/pro-components';
import {useParams} from "umi"
import {getIssueById} from "@/services/issue"
import {useEffect,useState} from "react"
import { Card, Space,Tag } from 'antd';
import {getUserById} from "@/services/user"
import {formatTime} from "@/utils/formatTime"
import style from "./issue.module.css"
export default function IssueDetail(){
    const [issueInfo,setIssueInfo] = useState({})
    const [username,setUserName] = useState('')
    const params =useParams();
    console.log(params);
    const id = params.id;
    // 根据id请求问答详情
    useEffect(()=>{
        getIssueById(id).then(res=>{
            // console.log(res,'问答详情')
            setIssueInfo(res.data)
            console.log(res.data)
            // 拿到用户信息
            getUserById(res.data.userId).then(resp=>{
                console.log(resp)
                setUserName(resp.data.loginId)
            })
        })
    },[])
    return (
       <PageContainer >
           <Card
            title={issueInfo.issueTitle}
            >
                <h2>提问用户</h2>
                <Tag color="blue">{username}</Tag>
                <h2 style={{marginTop:'20px'}}>提问时间</h2>
                <Tag color="red">{formatTime(issueInfo.issueDate,true)}</Tag>

                <h2 style={{marginTop:'20px'}}>问题描述</h2>
                <div className={style.container} dangerouslySetInnerHTML={{__html:issueInfo.issueContent}}></div>

            </Card>
       </PageContainer>
    )
}